<template>
  <div style="height: 100%;">
    <div id="userRegisterPlot" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import userApi from '../../../api/cby/user.js'
  export default {
    name: 'userRegisterPlot',
    components: {
      echarts
    },
    mounted() {
      this.getPlotData()
    },
    data() {
      return {
        date: [],
        data: [],
      }
    },
    methods: {
      plot(date, data) {
        var chartDom = document.getElementById('userRegisterPlot');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'axis',
            position: function(pt) {
              return [pt[0], '10%'];
            }
          },
          title: {
            left: 'center',
            text: 'Area Chart'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 10
            },
            {
              start: 0,
              end: 10
            }
          ],
          series: [{
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }]
        };
        option && myChart.setOption(option);
      },
      getPlotData() {
        userApi.getPlotData()
          .then((response) => {
            this.date = response.data.xdata
            this.data = response.data.ydata
            this.plot(this.date, this.data)
          })
          .catch((error) => {
            console.log(error)
          });
      },
    }
  }
</script>

<style>

</style>
